
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<style>
* {
	padding: 0;
	margin: 0;
}
.input {
	margin:10px 10px 400px 10px;
	width: 200px;
	height: 30px;
	border: 1px solid #ccc;
	display: block;
}
.next {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: orangered;
	position: fixed;
	bottom:0;
	color:#fff;
	text-align: center;
}
.pos-rel {
	position: relative;
}
</style>
    <script type='text/javascript' src='/staticFiles/js/zepto/zepto.min.js' charset='utf-8'></script>
</head>
<body>
<section class="content">
 
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="text" />
 
<div class="next">
下一步
</div>
</section>
 
<script>
$(function() {
	alert('begin');
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);
 
if (isIOS) {
	$('.content').on('focus', 'input', function () {
		$('.next').addClass('pos-rel');
	}).on('focusout', 'input', function () {
		$('.next').removeClass('pos-rel');
});
}
});
</script>
</body>
</html>